@charset "UTF-8";

body {
    /*内外边距初始化为0*/
    margin: 0;
    padding: 0;
    /*顶部背景颜色设置，沿着水平方向进行平铺*/
    background: url("../img/header-background.png") repeat-x;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;   /*去除列表前的标记*/
}
a {
    text-decoration: none;
    color: #87CEFA;
}
/*header div样式*/
.header {
    /*设置相对位置 生成相对定位的元素，相对于其正常位置进行定位*/
    position: relative;
    width: 760px;
    height: 140px;
    margin: 0 auto;
}
.header .logo{
    /*设置相对位置 生成绝对定位的元素*/
    position: absolute;
    top: 8px;  /*距离顶部距离多少*/
    left: 0px; /*距离左侧距离多少*/
}
.header h1 span{
    display: none;
}

.header h1{
    /*图片位置设置 不平铺 透明度*/
    background: transparent url("../img/title.png") no-repeat;
    position: relative;
    left: 55px;
    /*设置h1的高度 否则在取消内容的时候，h1的高度为0，无法显示图片*/
    height: 65px;
    margin: 0 auto;
}

.header .main {
    /*生成绝对定位的元素*/
    position: absolute;
    top: 92px;
}
.header li{
    /*设置标签悬浮效果*/
    float: left;
}
/*主导航样式设置*/
.header .main li{
    padding: 5px;
    left: 0px;
}
/*网站首页背景图片设置*/
.header .main a{ /*左侧圆弧*/
    color: white;
    background: url("../img/main-navi.gif") no-repeat;
    padding: 0 0 0 15px; /*为左侧的弧度预留空间*/
    /*将a标签设置为块标签既可以设置边距和宽高，行标签是不能进行设置的*/
    display: block;
}

.header .main a b{
    display: block;
    /*上右下左 顺时针的值设置*/
    padding: 0 15px 0 0; /*为右侧的弧度流出空间*/
    background: url("../img/main-navi.gif") no-repeat right;
}

.header .main a:HOVER{ /*左侧圆弧*/
    color: #87CEFA;
    background: url("../img/main-navi-hover.gif") no-repeat;
    padding: 0 0 0 15px; /*为左侧的弧度预留空间*/
    display: block;
}

.header .main a:HOVER b{
    display: block;
    padding: 0 15px 0 0; /*为右侧的弧度流出空间*/
    background: url("../img/main-navi-hover.gif") no-repeat;
}

/*顶部导航栏样式*/
.header .top{
    /*生成绝对定位的元素*/
    position: absolute;
    top: 0px;
    right: 0px;
    margin-top: 0;
    margin-right: 0;
}

.header .top li{
    /*设置悬浮效果*/
    float: left;
    padding: 0 5px;
}

.header .top a{/*设置左侧背景图片*/
    background: url("../img/top-navi-white.gif") no-repeat;
    padding: 0 0 0 15px;  /*为左侧的弧度留空间*/
    display: block;
}
.header .top span{/*设置右侧背景图片*/
    display: block;
    padding: 0 15px 0 0;/*为右侧的弧度留空间*/
    background: url("../img/top-navi-white.gif") no-repeat right;
}

/*设置划过效果*/
.header .top a:HOVER{/*设置左侧背景图片*/
    background: url("../img/top-navi-hover.gif") no-repeat;
    padding: 0 0 0 15px;  /*为左侧的弧度留空间*/
    display: block;
}
.header .top span{/*设置右侧背景图片*/
    display: block;
    padding: 0 15px 0 0;/*为右侧的弧度留空间*/
    background: url("../img/top-navi-white.gif") no-repeat right;
}

/*右侧导航效果*/
.header .right{
    position: absolute;
    top: 44px;
    right: 5px;
}

.header .right li{
    float: left;
    top: 0;
    right: 0;
    width: 93px;  /*根据要添加的图片设置li的大小*/
    height: 110px;
}

.header .right span{
    color: black;
    display: none;
}

.header .right .login{
    display: block; /*快标签可以设置大小*/
    height: 110px;
    width: 93px;
    background: url("../img/account-left.jpg") no-repeat;
}

.header .right .car{
    display: block; /*快标签可以设置大小*/
    height: 110px;
    width: 93px;
    background: url("../img/account-right.jpg") no-repeat;
}

.header .right .login:HOVER{
    display: block;
    height: 110px;
    width: 93px;
    background: url("../img/account-left.jpg") no-repeat bottom;
}
.header .right .car:HOVER{
    display: block; /*快标签可以设置大小*/
    height: 110px;
    width: 93px;
    background: url("../img/account-right.jpg") no-repeat bottom;
}





